<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>

		<div id="map"></div>

		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/leaflet-tilelayer-colorfilter.min.js"></script>
		<script>
			let map = L.map("map", {
				zoom: 12,
				maxZoom: 18,
				center: [34.269701076858354, 108.94729614257814],
			});
			let myFilter = [
				"blur: 0px", //应用以像素为单位的高斯模糊过滤
				"brightness: 100%", //控制平铺图像的亮度
				"contrast: 100%", //更改磁贴的颜色对比度
				"grayscale: 0%", //将图块的颜色更改为灰度
				"hue: 90deg", //在平铺颜色上应用以度为单位的色相旋转
				"opacity: 100%", //定义平铺的不透明度
				"invert: 80%", //反转平铺颜色
				"saturate: 100%", //使平铺颜色饱和
				"sepia: 10%", //将平铺颜色转换为棕褐色
			];
			L.tileLayer
				.colorFilter('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
					filter: myFilter,
				})
				.addTo(map);
		</script>
	</body>

</html>